<template>
  <ui-container>
    <span class="header-title">{{ headerTitle }}</span>
    <div class="single-transfer-res">
      <vx-title-bar current="3" />
      <vx-result :resDetail="resultInfo" :title="resultInfo.state === '00' ? '交易提交成功' : '交易提交失败'"> </vx-result>
      <ui-collapse v-model="dealNames">
        <ui-collapse-item title="转账进度" name="1" class="mg-bt-20">
          <vx-result-step :resultInfo="resultInfo" name="单笔转账"></vx-result-step>
        </ui-collapse-item>
        <ui-collapse-item title="转账详情" name="2">
          <single-transfer class="mg-top-30" :obj="payer" />
        </ui-collapse-item>
      </ui-collapse>
      <div class="justify-center text-link">
        <span @click="onQueryTransfer">转账交易查询</span>
        <span class="text-link-center">|</span>
        <span @click="onGoTransferPre">继续转账</span>
      </div>
      <div class="justify-center">
        <ui-button class="primary-long-btn" @click="onGoTransferPre">返回</ui-button>
      </div>
    </div>
  </ui-container>
</template>

<script>
import singleTransfer from '@/views/components/singleTransfer';
export default {
  components: {
    singleTransfer,
  },
  data() {
    return {
      dealNames: ['1', '2'],
      payer: this.getData() || {},
      resultInfo: this.getData().resultInfo || [],
    };
  },
  methods: {
    // 转账交易查询
    onQueryTransfer() {
      this.$router.push({
        name: 'transferRemit-transTransaction-transferSingleQry',
      });
    },
    // 继续转账
    onGoTransferPre() {
      this.clearData();
      this.$router.back(-1);
    },
  },
  // beforeDestroy() {
  //   this.$route.meta.keepAlive = false;
  // },
  beforeRouteLeave(to, from, next) {
    // 前往转账交易查询后，点击浏览器返回要回到普通转账结果页，保留数据。其他情况清空数据。
    if (to.name !== 'transferRemit-transTransactionQry') {
      this.clearData();
      to.meta.keepAlive = false;
    }
    next();
  },
};
</script>
